<template>
  <a-form-model :model="settingForm" ref="settingForm" layout="inline" :label-col="{span: 12}"
                :wrapper-col="{span: 12}" :rules="settingFormRules">
    <a-col :span="2">
      <a-form-model-item :wrapper-col="{span: 24}" prop="mainFlg">
        <a-checkbox :checked="settingForm.mainFlg" @change="mainFlgChange"></a-checkbox>
        {{$t('menuItem.naturalKey')}}
      </a-form-model-item>
    </a-col>
    <a-col :span="4">
      <a-form-model-item :label="$t('menuItem.vauleType')" prop="valueType">
        <a-select v-model="settingForm.valueType"  showSearch optionFilterProp="children" >
          <a-select-option v-for="d in VALUE_TYPE" :key="d.value" :title="d.label">
            {{d.label}}
          </a-select-option>
        </a-select>
      </a-form-model-item>
    </a-col>
    <a-col :span="4" v-if="settingForm.valueType === VALUE_TYPE_STR">
      <a-form-model-item :label="$t('menuItem.valueLength')" prop="valueLength">
        <a-input-number :min="1" :precision="0" v-model="settingForm.valueLength" style="width: 100%" @blur="showDefaultModalFunc"></a-input-number>
      </a-form-model-item>
    </a-col>
    <a-col :span="10" v-else-if="settingForm.valueType === VALUE_TYPE_INT || settingForm.valueType === VALUE_TYPE_DOUBLE "
           :key="settingForm.valueType">
      <a-col :span="8">
        <a-form-model-item :label="$t('menuItem.MinVaule')" prop="valueMin">
          <a-input-number :min="0" :precision="0" v-model="settingForm.valueMin" @change="maxAndMinChange" @blur="showDefaultModalFunc"
                          style="width: 100%"></a-input-number>
        </a-form-model-item>
      </a-col>
      <a-col :span="8">
        <a-form-model-item :label="$t('menuItem.MaxVaule')" prop="valueMax">
          <a-input-number :min="0" :precision="0" v-model="settingForm.valueMax" @change="maxAndMinChange" @blur="showDefaultModalFunc"
                          style="width: 100%"></a-input-number>
        </a-form-model-item>
      </a-col>
      <a-col :span="8">
        <a-form-model-item v-if="settingForm.valueType === VALUE_TYPE_DOUBLE" :label="$t('menuItem.accuracy')" prop="valueAccuracy">
          <a-input-number :min="0" :precision="0" v-model="settingForm.valueAccuracy" style="width: 100%" @blur="showDefaultModalFunc"></a-input-number>
        </a-form-model-item>
      </a-col>
    </a-col>
  </a-form-model>
</template>

<script>
import {mapMutations, mapState} from "vuex";
import length from "../../../rule";

const VALUE_TYPE_STR = 'STR'
const VALUE_TYPE_INT = 'INT'
const VALUE_TYPE_DOUBLE = 'DOUBLE'

export default {
  name: "ValueSetting",
  props: {
    valueName: {
      type: String,
      default: ''
    },
    settingForm: {
      type: Object,
      default: () => {
        return {
          value: '',
          mainFlg: false,
          valueType: VALUE_TYPE_STR,
          valueLength: null,
          valueMax: null,
          valueMin: null,
          valueAccuracy: null,
        }
      }
    }
  },
  data() {
    return {
      VALUE_TYPE_STR,
      VALUE_TYPE_INT,
      VALUE_TYPE_DOUBLE,
      VALUE_TYPE: [
        {label: this.$t('menuItem.String'), value: VALUE_TYPE_STR},
        {label: this.$t('menuItem.Int'), value: VALUE_TYPE_INT},
        {label:this.$t('menuItem.Float'), value: VALUE_TYPE_DOUBLE},
      ],
      settingFormRules: {
        valueType: [
          {required: true, message: this.$t('menuItem.ChoiceVauleType'), trigger: 'blur'},
        ],
        valueLength: [
          {required: true, message: this.$t('menuItem.ChoiceValueLength'), trigger: 'blur'},
          {validator: this.validateLength, trigger: 'blur'}
        ],
        valueMax: [{required: true, message: this.$t('menuItem.ChoiceMaxVaule'), trigger: 'blur'}, {
          validator: this.validateMaxAndMin,
          trigger: 'blur'
        },],
        valueMin: [{required: true, message: this.$t('menuItem.ChoiceMinVaule'), trigger: 'blur'}, {
          validator: this.validateMaxAndMin,
          trigger: 'blur'
        },],
        valueAccuracy: [
          {required: true, message: this.$t('menuItem.ChoiceAccuracy'), trigger: 'blur'},
          {validator: this.validateAccuracy, trigger: 'blur'}
        ],
      }
    }
  },
  computed: {
    lengthLimit() {
      switch (this.valueName) {
        case 'dataItem':
          return length.DATA_ITEM_LENGTH
        case 'dataId':
          return length.DATA_ID_LENGTH
        case 'dataExt':
          return length.DATA_EXT_LENGTH
        case 'dataDesc':
          return length.DATA_DESC_LENGTH
        default:
          return length.EXT_LENGTH
      }
    },
  },
  methods: {
    validateMaxAndMin (rule, value, callback) {
      let max = Number(this.settingForm.valueMax) || ''
      let min = Number(this.settingForm.valueMin) || ''
      if (value && String(value).length > length.EXT_LENGTH) {
        callback(new Error(this.$t('menuItem.CheckWarn1') + length.EXT_LENGTH));
      } else if (value && String(value).length > this.lengthLimit) {
        callback(new Error(this.$t('menuItem.CheckWarn2') + this.lengthLimit));
      } else if (max && min && max < min) {
        callback(new Error(this.$t('menuItem.CheckWarn3')));
      } else {
        callback();
      }
    },
    validateLength (rule, value, callback){
      if (value && String(value).length > length.EXT_LENGTH) {
        callback(new Error(this.$t('menuItem.CheckWarn1') + length.EXT_LENGTH));
      } else if (value && Number(value) > this.lengthLimit) {
        callback(new Error(this.$t('menuItem.CheckWarn2') + this.lengthLimit));
      } else {
        callback();
      }
    },
    validateAccuracy(rule, value, callback) {
      if (value && String(value).length > length.EXT_LENGTH) {
        callback(new Error(this.$t('menuItem.CheckWarn1')+ length.EXT_LENGTH));
      } else if (this.settingForm.valueMax && value && Number(value) > this.lengthLimit - String(this.settingForm.valueMax).length - 1) {
        callback(new Error(this.$t('menuItem.CheckWarn4') + (this.lengthLimit - String(this.settingForm.valueMax).length - 1)));
      } else {
        callback();
      }
    },

    mainFlgChange(e) {
      this.$set(this.settingForm, 'mainFlg', e.target.checked)
    },
    maxAndMinChange() {
      this.$refs.settingForm.validateField(['valueMax', 'valueMin', 'valueAccuracy'])
    },
    showDefaultModalFunc(){
      if(this.settingForm.value){
        switch (this.settingForm.valueType) {
          case VALUE_TYPE_STR:
            if(this.settingForm.valueLength){
              this.$emit('showDefaultModal')
            }
            break;
          case VALUE_TYPE_INT:
            if(this.settingForm.valueMax && this.settingForm.valueMin ){
              this.$emit('showDefaultModal')
            }
            break;
          case VALUE_TYPE_DOUBLE:
            if(this.settingForm.valueMax && this.settingForm.valueMin &&this.settingForm.valueAccuracy ){
              this.$emit('showDefaultModal')
            }
            break;
          default:
        }
      }
    }
  },
  mounted() {
  },
}
</script>

<style scoped>

</style>
